<template>
  <view class="filter-item">
    <text class="font-item-text">户籍地区</text>
    <picker mode="region" :custom-item="['省']" @change="onChange">
      <view class="uni-input">
        <template v-if="hukouArea.length">
          <text class="range-text">{{ hukouArea.join(' ') }}</text>
        </template>
        <template v-else>请选择户籍地区</template>
        <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
      </view>
    </picker>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps<{
  hukouArea: string[]
}>()
const emit = defineEmits<{
  (e: 'update:hukouArea', value: string[]): void
}>()

const hukouArea = ref<string[]>([...props.hukouArea])

watch(
  () => props.hukouArea,
  (newVal) => {
    hukouArea.value = [...newVal]
  },
)

const onChange = (e) => {
  if (e.detail.value.length) {
    hukouArea.value = e.detail.value
    emit('update:hukouArea', hukouArea.value)
  }
}
</script>

<style scoped>
.filter-item {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  margin-bottom: 20px;
}

.font-item-text {
  color: #a9a5a3;
}

.uni-input {
  display: flex;
  align-items: center;
}

.range-text {
  color: #1e90ff;
}

.icon {
  color: #ccc;
  margin-left: 10px;
}
</style>
